//loading效果组件
<template>
  <div>
    <header class="header" :style="{backgroundColor:bgColor}">
      <div class="logo">
        <span>辰兴华科@领衔主演-云</span>
      </div>
      <div class="setting">
        <div class="dropdown">
          <Dropdown>
            <Button type="primary">
              下拉菜单
              <Icon type="arrow-down-b"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem>驴打滚</DropdownItem>
              <DropdownItem>炸酱面</DropdownItem>
              <DropdownItem>豆汁儿</DropdownItem>
              <DropdownItem>冰糖葫芦</DropdownItem>
              <DropdownItem>北京烤鸭</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
        <div class="">
          <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
        </div>
        <div class="more" @click="showInfo">
          <Icon type="ios-more"></Icon>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
  export default {
    name: 'Yheader',
    props: ["bgColor"],
    data(){
      return{

      }
    },
    methods:{
      showInfo(){

      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assets/css/variable";
  .header{
    display: flex;
    height: 50px;
    .logo{
      flex: 0 0 200px;
      background-color: @blue;
      >span{
        display: block;
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-size: 15px;
      }
    }
    .setting{
      flex: 1;
      padding-top: 10px;
      text-align: right;
      padding-right: 10px;
      >div{
        display: inline-block;
        vertical-align: middle;
      }
      .dropdown{
        text-align: center;
      }
      .more{
        padding: 0 10px;
        cursor: pointer;
        i{
          font-size: 32px;
        }
      }
    }
  }
</style>
